<template>
  <div class="user-center">
    <el-card class="profile-card">
      <div class="avatar-upload">
        <el-upload
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleAvatarChange">
          <img v-if="avatarUrl" :src="avatarUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="username">{{ username }}</div>
      </div>
      
      <el-form 
        class="profile-form" 
        :model="formData" 
        :rules="formRules" 
        ref="profileForm"
      >
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-button type="primary" @click="updateProfile">保存修改</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarUrl: this.$store.state.avatar,
      formData: {
        email: this.$store.state.email,
        phone: this.$store.state.phone
      },
      username: this.$store.state.username,
      formRules: {
        email: [
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
      const isImage = allowedTypes.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!isImage) {
          this.$alert('仅支持 JPG/PNG 格式图片', '格式错误', {
              confirmButtonText: '确定',
              type: 'warning'
          });
      }
      if (!isLt2M) {
          this.$alert('图片大小不能超过 2MB', '尺寸过大', {
              confirmButtonText: '确定',
              type: 'warning'
          });
      }
      return isImage && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.avatarUrl = URL.createObjectURL(file.raw);
      this.$store.commit('UPDATE_PROFILE', {
          ...this.$store.state,
          avatar: this.avatarUrl
      });
    },
    updateProfile() {
        this.$refs.profileForm.validate(valid => {
            if (valid) {
                // 这里应添加实际保存到后端的代码
                this.$store.commit('UPDATE_PROFILE', {
                    avatar: this.avatarUrl,
                    email: this.formData.email,
                    phone: this.formData.phone
                });
                this.$message.success('个人信息已更新');
            }
        });
    },
    handleAvatarChange(file) {
        // 添加文件类型白名单验证
        const allowedTypes = ['image/jpeg', 'image/png'];
        if (!allowedTypes.includes(file.raw.type)) {
            this.$message.error('仅支持JPEG/PNG格式');
            return false;
        }
        
        // 添加文件大小限制（2MB）
        if (file.size / 1024 / 1024 > 2) {
            this.$message.error('图片大小不能超过2MB');
            return false;
        }

        // 创建临时预览URL
        this.avatarUrl = URL.createObjectURL(file.raw);
        
        // 立即更新store中的头像
        this.$store.commit('UPDATE_PROFILE', {
            avatar: this.avatarUrl
        });
        
        return false; // 阻止自动上传
    }   // 移除末尾逗号
  },  // 移除methods闭合后的逗号和注释
}
</script>

<style scoped>
.user-center {
  padding: 100px 0;
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  justify-content: center;
}

.profile-card {
  width: 800px;
  padding: 30px;
}

.avatar-upload {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-uploader {
  margin: 0 auto 20px;
}

.avatar-uploader >>> .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}

.username {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.profile-form {
  max-width: 500px;
  margin: 0 auto;
}
</style>